<template>

  <div class="box">
     <template>
    <!-- 初始化echarts需要有个宽高的盒子 -->
    <!-- <van-tabs v-model="activeName">
  <van-tab title="标签 1" name="a">内容 1</van-tab>
  <van-tab title="标签 2" name="b">内容 2</van-tab>
  <van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs> -->
   
      <div ref="linebox" style="height: 7.8rem; width: 100%" class="line"></div>
    </template>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china.js";
import jsonp from "jsonp";
// 绘制地图
function fontSize(res) {
  let clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 1920);
  return res * fontSize;
}
const option = {
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      show: false,
    },
    axisTick: {
      //x轴刻度线
      show: false,
      alignWithLabel: true,
    },
    axisLabel: {  
   interval:5,  
   rotate:40  
}  
  },
  yAxis: {
    type: "value",
    boundaryGap: true,
    // min: 80000,
    data: [],
    axisLine: {
      show: false,
    },
    axisTick: {
      //x轴刻度线
      show: false,
      alignWithLabel: true,
    },
  },
  grid: {
    left: "1%", // 与容器左侧的距离
    right: " 2%", // 与容器右侧的距离
    top: "18%", // 与容器顶部的距离
    bottom: "10%", // 与容器底部的距离
    borderWidth: 10,
    containLabel: true,
  },

  title: {
    left: "left",
    text: "无症状感染者新增趋势",
    textStyle: {
      fontSize: fontSize(0.7),
    },
  },
  tooltip: {
    trigger: "axis",
  },
  series: [
    {
      data: [],
      type: "line",
    },
  ],
};
//使用exhart
export default {
  name: "HelloWorld",
  mounted() {
    this.getData();
    //创建mychart实例
    this.mychart = echarts.init(this.$refs.linebox);
    this.mychart.setOption(option); //加载option
  },
  methods: {
    getData() {
      //从新浪取到json数据
      jsonp(
        //  `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
        // `https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5`,
        `https://view.inews.qq.com/g2/getOnsInfo?name=disease_other`,
        {},
        (err, res) => {
          if (!err) {
            console.log(res);
            //  console.log(res.data);
            var arr = res.data;
            arr = JSON.parse(arr);
            console.log(arr);
            let chinaDayList = arr.chinaDayList;
            let series = [];
            let yAxis = [];
            let xAxis = [];
            for (let i = 0; i <= 59; i++) {
              let data = chinaDayList[i].noInfect;
              let date = chinaDayList[i].date;
              let time = date.split('.')
              let month = time[0];
              let day = time[1];
              let time2 = month+'-'+day;
              // console.log(data);
              // console.log(date);
              series.push(data);
              yAxis.push(time2);
              xAxis.push(time2);
            }
            // console.log(series)
            // console.log(yAxis)
            // console.log(xAxis)
            option.yAxis.data = yAxis;
            option.xAxis.data = xAxis;
            option.series[0].data = series;
            this.mychart.setOption(option);
          }
        }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>